.page {

  margin-top: $nav-height;
  overflow-y: auto;
  height: calc(100vh - #{$nav-height});
  width: 100vw;

  @media screen and (min-width: $on-large) {
    margin-top: 0;
    height: 100vh;
  }

  .breadcrumbs {
    width: 100%;
    border-bottom: 1px solid $separator-color;
    margin-bottom: 2 * $spacing;

    * {
      display: inline;
      margin-right: 8px;
    }
  }

  .content {
    margin-bottom: $spacing;
    margin-top: $spacing;
    margin-left: $spacing;
    margin-right: $spacing;

    @media screen and (min-width: $on-large) {
      margin-left: 2 * $spacing;
      margin-right: 2 * $spacing;
      max-width: 800px;
    }
  }

  .link-list {

    a {
      font-size: $font-size;
      color: $text-default;
      transition: color $transition-default;

      &:hover {
        color: $text-highlight;
      }
    }
  }

  h1 {
    margin-top: 2 * $spacing;
    word-wrap: break-word;
  }

  h2 {
    margin-top: 1.5 * $spacing;
    border-bottom: 1px solid $separator-color;
    word-wrap: break-word;

    &:before {
      content: "# ";
      color: $text-highlight;
    }
  }

  h3 {
    margin-top: $spacing;
    word-wrap: break-word;
  }

  ol, ul {
    margin-left: $spacing * 0.75;
    margin-bottom: $spacing / 2;
    line-height: 1.8;
  }

  ul {
    list-style: disc;
  }

  .list-simple {
    list-style: none;
    margin-left: 0;
  }

  .page-nav {
    display: flex;
    justify-content: space-between;

    .container {
      display: flex;
      width: 50%;

      .arrow {
        align-self: center;
      }

      p {
        display: inline;
        margin-bottom: 0px;
        margin: 0px $spacing/2;
        align-self: center;
      }
    }

    .right {
      margin-left: auto;
      justify-content: flex-end;
    }
  }
}
